<template>
	<view class="">
		<view v-if="!isLogin" class="login flex-col col-center row-center">
			<u-loading size="40" color="#00632B" mode="circle" :show="showLoading"></u-loading>
			<image :src="imgUrl + '/wechat/static/images/goods_null.png'" v-show="!isLogin"></image>
			<router-link to="/pages/login/login">
				<view class="muted mt20" style="font-size: 36rpx;" v-show="!isLogin">请先登录商城</view>
			</router-link>
		</view>
		<view v-else class="goods-cate">
			<router-link to="/bundle/pages/goods_search/goods_search">
				<view class="header">
					<u-search bg-color="#F4F4F4" :disabled="true"></u-search>
				</view>
			</router-link>
			<view class="content" v-if="appConfig.cate_style == 1 || appConfig.cate_style == 4">
				<cate-two :cate-list="cateList" :currid="id"></cate-two>
			</view>
			<view class="content bg-body" v-if="appConfig.cate_style == 3 || appConfig.cate_style == 2">
				<cate-one :cate-list="cateList" :currid="id" :currIndex="currIndex"></cate-one>
			</view>
		</view>
		<view v-if="maskHeight2" class="overlay" @click="showPopCatFilter(0)"></view>
		<mask-cat-filter :maskHeight2="maskHeight2" @click="showPopCatFilter(1)" @update="showPopCatFilter"></mask-cat-filter>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getLevelOneList,
		getGoodsList,
		getListByLevelOne,
		getAdList
	} from '@/api/store';
	import {
		getRect,
		trottle,
		arraySlice
	} from '@/utils/tools';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Cache from '@/utils/cache'
	import {
		TABBAROPTION,
	} from '@/config/cachekey';
	export default {
		data() {
			return {
				maskHeight2:0,
				cateList: [],
				imgUrl: `${this.$imgUrl}`,
				cateTwoList: [],
				selectIndex: 0,
				name: '',
				id: '',
				currIndex: 0,
				tabBarOptions:{},
				
			};
		},
		async onLoad(options) {
			this.tabBarOptions = Cache.get(TABBAROPTION);
			//重置
			Cache.set(TABBAROPTION,  {});
			const {
				id,
				title,
				name
			} = this.$Route.query
			this.id = id;
			if(this.tabBarOptions && this.tabBarOptions.id){
				this.id = this.id ? this.id : this.tabBarOptions.id
			}
			this.title = title
			this.name = name
			uni.setNavigationBarTitle({
				title: name
			});
			/* if (!this.distribution.distribution_agent_name&&!this.showLoading) {
				uni.setNavigationBarTitle({
					title: ''
				});
			} */
				if(this.appConfig.cate_style == 1||this.appConfig.cate_style == 2){
					this.getListByLevelOneFun()
					
				}else{
					this.getLevelOneListFun();
				}
			
		},
		onShow() {
			this.getCartNum()
		},
		methods: {
			showPopCatFilter(isShow){
				console.log('===高度增加=showPopCatFilter======' + isShow);
				this.maskHeight2 = isShow;
			},
			hidePopCatFilter(){
				console.log('====hidePopCatFilter=====');
				this.maskHeight2 = 0;
			},
			...mapActions(['getCartNum']),
		

			async getLevelOneListFun() {
				const {
					code,
					data
				} = await getLevelOneList();
				if (code == 1) {
					this.cateList = data
				}
			},
			async getListByLevelOneFun() {
				const {
					code,
					data
				} = await getListByLevelOne({id:2});
				if (code == 1) {
					this.cateList = data
					if (this.id) {
						this.currIndex =this.cateList.findIndex((item)=>{
							return this.id==item.id
						})
						console.log('this.currIndex',this.currIndex)
					}
				}
			},
			
		},
		computed: {
			...mapGetters(['inviteCode', 'appConfig', 'distribution', 'showLoading']),
		}
	};
</script>
<style lang="scss" scoped>
	$header-height: 94rpx;

	page {
		background-color: #fff;
		height: 100%;
		.login {
			height: calc(100vh - var(--window-bottom));
			background: #fff;
			text-align: center;
		}
		.goods-cate {
			height: 100%;
			.header {
				box-sizing: border-box;
				height: $header-height;
				border-bottom: $-solid-border;

				.search {
					flex: 1;
					height: 60rpx;

					input {
						flex: 1;
						height: 100%;
					}
				}
			}

			.content {
				height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom) - 50px - env(safe-area-inset-bottom));
			}
		}
	
		.overlay {
			  position: absolute;  
			  top: 0;  
			  left: 0;  
			  right: 0;  
			  bottom: 0;  
			  z-index: 99; /* 确保在 u-mask 之上 */  
			  background-color: transparent; /* 透明遮罩 */  
		} 
	
	}
</style>
